<template>
  <div>
    <!--合同审批-->
    <el-form :inline="true" label-position="right" label-width="140px" size="small" class="filter-form-inline">
      <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
        <el-col :span="8">
          <el-form-item label="流程编号：" style="width: 100%;">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：" style="width: 100%;">
            {{ dateFormat('yyyy-mm-dd HH:MM:SS',detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：" style="width: 100%;">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <item-title title="合同信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号：" style="width: 100%;">
            {{ detailData.data?.contractNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称：" style="width: 100%;">
            {{ detailData.data?.contractName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同对象：" style="width: 100%;">
            <span> {{ getLabel('contract_object', detailData.data?.contractObjectType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型：" style="width: 100%;">
            <span> {{ getLabel('contract_type', detailData.data?.contractType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相对方名称：" style="width: 100%;">
            <span>{{ detailData.data?.objectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同金额：" style="width: 100%;">
            <span>{{ detailData.data?.contractAmount === 0 ? '' : detailData.data?.contractAmount }}</span>
            <span v-if="detailData.data?.contractAmount !== 0">元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始日期：" style="width: 100%;">
            <span> {{ dateFormat("yyyy-mm-dd",detailData.data?.contractBeginTime) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束日期：" style="width: 100%;">
            <span> {{ dateFormat("yyyy-mm-dd",detailData.data?.contractEndTime) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属部门：" style="width: 100%;">
            <span>{{ detailData.data?.contractDepartmentName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同负责人：" style="width: 100%;">
            <span>{{ detailData.data?.contractHeadName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同附件：" style="width: 100%;">
            <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
              <div v-for="(item,index) in detailData.data?.contractFile" :key="index" style="margin-right: 20px">
                <el-button type="text" @click="handlDownload(item)">
                  {{ item.name }}
                </el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </div>
</template>

<script>
import {downloadFile} from '@/utils/downloadFile'
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'Index',
  props: {
    detailData: {
      type: Object,
      default: {
        data: {}
      }
    }

  },
  setup(props) {
    var data = reactive({
      detailData: {}
    })
    const handlDownload = (url) => {
      downloadFile(url.url)
    }
    watch(() => props.detailData, (newval, oldval) => {
      if (newval) {
        data.detailData = newval
      }
    },
    { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
      handlDownload
    }
  }
}

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
